import React, { Component } from "react";
import domtoimage from "dom-to-image";
import $ from "jquery";
import { message } from "antd";
import QRCode from "react-qr-code";
import "./index.scss";
function QRCodeDialog(props) {
	const {
		visible,
		changeVisible,
		scheduleInfo = {},
		width = "480px",
      	height = "599px",
	} = props;
	// 下载图片
	const download = () => {
		let dom = $("#QRdialog_box_Id");
		const filter = function(node) {
			let sign = true;
			if (
				$(node).attr("class") &&
				$(node)
					.attr("class")
					.indexOf("btn") !== -1
			) {
				sign = false;
			}
			return sign;
		};
		domtoimage.toBlob(dom[0], { filter }).then(function(blob) {
			let url = URL.createObjectURL(blob);
			let a = document.createElement("a");
			let name = scheduleInfo.scheduleTitle + "-会议签到二维码";
			a.href = url;
			a.download = name;
			let event = new MouseEvent("click");
			a.dispatchEvent(event);
			URL.revokeObjectURL(url);
		});
	}
	// 分享（复制地址）
	const shareURL = () => {
    	let url = window._BasicProxy + "scheduleSignIn/h5/index.html?scheduleId=" + scheduleInfo.scheduleId;
		url = decodeURIComponent(url);

		let oInput = document.createElement("input");

		oInput.value = url;

		document.body.appendChild(oInput);

		oInput.select(); // 选择对象

		document.execCommand("Copy"); // 执行浏览器复制命令

		oInput.className = "oInput";

		oInput.style.display = "none";

		message.success("复制地址成功");
	}
	return (
		<div
			className="QRCodeDialog"
			style={{ display: visible ? "block" : "none" }}
		>
			<div className="modal"></div>
			<div
				className="QRdialog_box"
				style={{
					width: width,
					height: height
				}}
			>
				<div className="QRdialog_box_container" id="QRdialog_box_Id">
					<div className="title">{scheduleInfo.scheduleTitle}</div>
					<div className="option">
						<div className="option-one block">
							<span className="option-one-name">时间:</span>
							<span className="option-one-value">{scheduleInfo.scheduleDate} {scheduleInfo.startTime}~{scheduleInfo.endTime}</span>
						</div>
						<div className="option-one">
							<span className="option-one-name">地点:</span>
							<span className="option-one-value" title={scheduleInfo.scheduleLocation||"--"}>{scheduleInfo.scheduleLocation||"--"}</span>
						</div>
						<div className="option-one" style={{marginRight: 0}}>
							<span className="option-one-name">发起人:</span>
							<span className="option-one-value" title={scheduleInfo.userName}>{scheduleInfo.userName}</span>
						</div>
					</div>
					<QRCode
					className="QRImage"
					value={window._BasicProxy + "scheduleSignIn/h5/index.html?scheduleId=" + scheduleInfo.scheduleId}
					size={224}
					fgColor="#000000" // 二维码的颜色
					/>
					<div className="tip">
					请使用【智慧校园通】App&小程序扫码签到
					</div>

					<div className="btn">
						<div className="download" onClick={download}>
							下载到本地
						</div>
						<div
							className="share"
							onClick={shareURL}
						>
							分享
						</div>
					</div>
					<div
						className="close"
						onClick={() => {
							changeVisible(false);
						}}
					>
						&#10005;
					</div>
				</div>
			</div>
		</div>
	);
}

export default QRCodeDialog;
